PageHeaderMobile - Code Metrics - Inspection of "[WIP] Full redesign from zero." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Pull Request — develop (#758)

by Kevin Van

created 2022-08-14 10:46 UTC

PageHeaderMobile A

↳ Parent: srcBU/components/page-header.js

Complexity

Total Complexity

Size/Duplication

Total Lines	57
Duplicated Lines	0 %

Importance

Changes

Metric	Value
wmc	1
eloc	51
dl	0
loc	57
rs	10
c	0
b	0
f	0

1 Function

Rating	Name	Duplication	Size	Complexity
B	render	0	52	1

import { Link } from "gatsby"
import React, { Component, Fragment } from "react"

import logo from "../images/logo-flat.png"
import "./page-header.scss"

// import bauvall from '../images/bauvall.png'

/**
 * Search for the closest match of a selector.
 *
 * Vanilla JS version of $.closest().
 *
 * @param {*} elem
 *   HTML DOMElement.
 * @param {*} selector
 *   CSS selector to search for (needle).
 */
const getClosest = (elem, selector) => {
  // Element.matches() polyfill
  if (!Element.prototype.matches) {
    Element.prototype.matches =
      Element.prototype.matchesSelector ||
      Element.prototype.mozMatchesSelector ||
      Element.prototype.msMatchesSelector ||
      Element.prototype.oMatchesSelector ||
      function (s) {
        const matches = (this.document || this.ownerDocument).querySelectorAll(s)
        let i = matches.length
        while (--i >= 0 && matches.item(i) !== this) {}
        return i > -1
      }
  }

  // Get closest match
  for (; elem && elem !== document; elem = elem.parentNode) {
    if (elem.matches(selector)) return elem
  }

  return null
}

/**
 * Render the menu items with proper <Link>'s.
 */
class MenuItems extends Component {
  componentDidMount() {
    const activeLinks = document.querySelectorAll(`.active`)
    let parent = null

    activeLinks.forEach((activeLink) => {
      parent = getClosest(activeLink, `.submenu`)
      if (parent !== null) {
        parent.classList.add(`is-active`)
      }
    })
  }

  render() {
    return (
      <Fragment>
        <li>
          <Link to="/" activeClassName="active" partiallyActive={false}>
            Home
          </Link>
        </li>
        <li>
          <Link to="/news/" activeClassName="active" partiallyActive={true}>
            Nieuws
          </Link>
        </li>
        <li>
          <Link to="/events/" activeClassName="active" partiallyActive={true}>
            Evenementen
          </Link>
        </li>
        <li>
          <Link to="/team/a-ploeg" activeClassName="active" partiallyActive={true}>
            A-Ploeg
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link to="/team/a-ploeg#team-info" activeClassName="active" partiallyActive={true}>
                Info
              </Link>
              <Link to="/team/a-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
                Spelers &amp; Staff
              </Link>
              <Link to="/team/a-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
                Wedstrijden
              </Link>
            </li>
            <li>
              <Link to="/team/a-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
                Stand
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/team/b-ploeg" activeClassName="active" partiallyActive={true}>
            B-Ploeg
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link to="/team/b-ploeg#team-info" activeClassName="active" partiallyActive={true}>
                Info
              </Link>
              <Link to="/team/b-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
                Spelers &amp; Staff
              </Link>
              <Link to="/team/b-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
                Wedstrijden
              </Link>
            </li>
            <li>
              <Link to="/team/b-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
                Stand
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/jeugd/" activeClassName="active" partiallyActive={true}>
            Jeugd
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link to="/team/zondagsreserven/" activeClassName="active" partiallyActive={true}>
                Zondagsreserven
              </Link>
            </li>
            <li>
              <Link
                to="/team/veteranen/"
                activeClassName="active"
                partiallyActive={true}
                className="menu_item--border-bottom"
              >
                Veteranen
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u17/" activeClassName="active" partiallyActive={true}>
                U17
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u15/" activeClassName="active" partiallyActive={true}>
                U15
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u13/" activeClassName="active" partiallyActive={true}>
                U13
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u12/" activeClassName="active" partiallyActive={true}>
                U12
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u11/" activeClassName="active" partiallyActive={true}>
                U11
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u10/" activeClassName="active" partiallyActive={true}>
                U10
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u9/" activeClassName="active" partiallyActive={true}>
                U9
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u8/" activeClassName="active" partiallyActive={true}>
                U8
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u7/" activeClassName="active" partiallyActive={true}>
                U7
              </Link>
            </li>
            <li>
              <Link to="/jeugd/u6/" activeClassName="active" partiallyActive={true}>
                U6
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
            Sponsors
          </Link>
        </li>
        <li>
          <Link to="/club/" activeClassName="active" partiallyActive={true}>
            De club
          </Link>
          <ul className="vertical menu submenu">
            <li>
              <Link to="/club/history/" activeClassName="active" partiallyActive={true}>
                Geschiedenis
              </Link>
            </li>
            <li>
              <Link to="/club/bestuur/" activeClassName="active" partiallyActive={true}>
                Bestuur
              </Link>
            </li>
            <li>
              <Link to="/club/jeugdbestuur/" activeClassName="active" partiallyActive={true}>
                Jeugdbestuur
              </Link>
            </li>
            <li>
              <Link to="/club/responsibilities/" activeClassName="active" partiallyActive={true}>
                Verantwoordelijkheden
              </Link>
            </li>
            <li>
              <Link to="/club/ultras/" activeClassName="active" partiallyActive={true}>
                KCVV Ultras
              </Link>
            </li>
            <li>
              <Link to="/club/contact/" activeClassName="active" partiallyActive={true}>
                Contact
              </Link>
            </li>
          </ul>
        </li>
        <li>
          <Link to="/search/" activeClassName="active" partiallyActive={true}>
            <i className={`fa fa-search`} aria-hidden="true"></i>
            {` `}
            <span className={`display-mobile--inline-block display-mobile search--label`}>Zoeken</span>
          </Link>
        </li>
      </Fragment>
    )
  }
}

/**
 * Render the desktop version of the header.
 */
class PageHeader extends Component {
  render() {
    return (
      // <!-- START STICKY CONTAINER --> //
      // <header data-sticky-container className="l--header">
      <header className="l--header">
        {/* <!-- START STICKY INNER --> */}
        {/* <div data-sticky data-options="marginTop:0;"> */}
        <div>
          {/* <!-- START MOBILE NAV BAR --> */}
          <div className="header--mobile" data-responsive-toggle="responsive-menu" data-hide-for="large">
            <button
              type="button"
              className="menu-icon"
              data-toggle="responsiveNavigation"
              aria-label="Toggle Responsive navigation"
            />
            <div className="header-mobile__logo">
              <Link to="/">
                <img src={logo} alt="KCVV Elewijt" className="header-mobile__logo-img" />
              </Link>
            </div>
          </div>
          {/* <!-- END MOBILE NAV BAR --> */}

          {/* <!-- START DESKTOP NAV BAR --> */}
          <div className="header--desktop">
            <div className="header__secondary show-for-large">
              <div className="grid-container">
                <div className="grid-x">
                  <div className="medium-4 medium-offset-8">
                    <div className="sponsors--header"></div>
                  </div>
                </div>
              </div>
            </div>
            <div className="header__primary show-for-large">
              <div className="grid-container">
                <div className="header__primary-inner">
                  {/* LOGO */}
                  <div className="header-logo">
                    <Link to="/">
                      <img src={logo} alt="KCVV Elewijt" className="header__logo-img" />
                    </Link>
                  </div>
                  <nav className="main-nav">
                    <ul className="main-nav__list--desktop menu dropdown" data-dropdown-menu>
                      <MenuItems />
                    </ul>
                  </nav>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* <!-- END DESKTOP NAV BAR --> */}

        {/* <!-- END STICKY INNER --> */}
      </header>
      // <!-- END STICKY CONTAINER --> //
    )
  }
}

/**
 * Render the mobile version of the header.
 */
export class PageHeaderMobile extends Component {
  render() {
    return (
      <nav className="off-canvas position-left" id="responsiveNavigation" data-off-canvas>
        <ul className="main-nav__list vertical menu" data-responsive-menu="accordion large-dropdown">
          <div className="header-mobile__logo">
            <button aria-label="Close menu" type="button" data-toggle="" className="button--back">
              {/* <span aria-hidden="true" /> */}
            </button>

            <Link to="/">
              <img src={logo} alt="KCVV Elewijt" className="header-mobile__logo-img" />
            </Link>
          </div>

          <MenuItems />

          <li className="main-nav__item--social-links">
            <a
              href="index.html"
              className="social-links__link"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Facebook"
            >
              <i className="fa fa fa-facebook" />
            </a>

            <a
              href="index.html"
              className="social-links__link"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Twitter"
            >
              <i className="fa fa fa-twitter" />
            </a>

            <a
              href="index.html"
              className="social-links__link"
              data-toggle="tooltip"
              data-placement="bottom"
              title=""
              data-original-title="Instagram"
            >
              <i className="fa fa fa-instagram" />
            </a>
          </li>
        </ul>
      </nav>
    )
  }
}

export default PageHeader


1			import { Link } from "gatsby"
2			import React, { Component, Fragment } from "react"
3
4			import logo from "../images/logo-flat.png"
5			import "./page-header.scss"
6
7			// import bauvall from '../images/bauvall.png'
8
9			/**
10			* Search for the closest match of a selector.
11			*
12			* Vanilla JS version of $.closest().
13			*
14			* @param {*} elem
15			* HTML DOMElement.
16			* @param {*} selector
17			* CSS selector to search for (needle).
18			*/
19			const getClosest = (elem, selector) => {
20			// Element.matches() polyfill
21			if (!Element.prototype.matches) {
22			Element.prototype.matches =
23			Element.prototype.matchesSelector \|\|
24			Element.prototype.mozMatchesSelector \|\|
25			Element.prototype.msMatchesSelector \|\|
26			Element.prototype.oMatchesSelector \|\|
27			function (s) {
28			const matches = (this.document \|\| this.ownerDocument).querySelectorAll(s)
29			let i = matches.length
30			while (--i >= 0 && matches.item(i) !== this) {}
31			return i > -1
32			}
33			}
34
35			// Get closest match
36			for (; elem && elem !== document; elem = elem.parentNode) {
37			if (elem.matches(selector)) return elem
38			}
39
40			return null
41			}
42
43			/**
44			* Render the menu items with proper <Link>'s.
45			*/
46			class MenuItems extends Component {
47			componentDidMount() {
48			const activeLinks = document.querySelectorAll(`.active`)
49			let parent = null
50
51			activeLinks.forEach((activeLink) => {
52			parent = getClosest(activeLink, `.submenu`)
53			if (parent !== null) {
54			parent.classList.add(`is-active`)
55			}
56			})
57			}
58
59			render() {
60			return (
61			<Fragment>
62			<li>
63			<Link to="/" activeClassName="active" partiallyActive={false}>
64			Home
65			</Link>
66			</li>
67			<li>
68			<Link to="/news/" activeClassName="active" partiallyActive={true}>
69			Nieuws
70			</Link>
71			</li>
72			<li>
73			<Link to="/events/" activeClassName="active" partiallyActive={true}>
74			Evenementen
75			</Link>
76			</li>
77			<li>
78			<Link to="/team/a-ploeg" activeClassName="active" partiallyActive={true}>
79			A-Ploeg
80			</Link>
81			<ul className="vertical menu submenu">
82			<li>
83			<Link to="/team/a-ploeg#team-info" activeClassName="active" partiallyActive={true}>
84			Info
85			</Link>
86			<Link to="/team/a-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
87			Spelers & Staff
88			</Link>
89			<Link to="/team/a-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
90			Wedstrijden
91			</Link>
92			</li>
93			<li>
94			<Link to="/team/a-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
95			Stand
96			</Link>
97			</li>
98			</ul>
99			</li>
100			<li>
101			<Link to="/team/b-ploeg" activeClassName="active" partiallyActive={true}>
102			B-Ploeg
103			</Link>
104			<ul className="vertical menu submenu">
105			<li>
106			<Link to="/team/b-ploeg#team-info" activeClassName="active" partiallyActive={true}>
107			Info
108			</Link>
109			<Link to="/team/b-ploeg#team-lineup" activeClassName="active" partiallyActive={true}>
110			Spelers & Staff
111			</Link>
112			<Link to="/team/b-ploeg#team-matches" activeClassName="active" partiallyActive={true}>
113			Wedstrijden
114			</Link>
115			</li>
116			<li>
117			<Link to="/team/b-ploeg#team-ranking" activeClassName="active" partiallyActive={true}>
118			Stand
119			</Link>
120			</li>
121			</ul>
122			</li>
123			<li>
124			<Link to="/jeugd/" activeClassName="active" partiallyActive={true}>
125			Jeugd
126			</Link>
127			<ul className="vertical menu submenu">
128			<li>
129			<Link to="/team/zondagsreserven/" activeClassName="active" partiallyActive={true}>
130			Zondagsreserven
131			</Link>
132			</li>
133			<li>
134			<Link
135			to="/team/veteranen/"
136			activeClassName="active"
137			partiallyActive={true}
138			className="menu_item--border-bottom"
139			>
140			Veteranen
141			</Link>
142			</li>
143			<li>
144			<Link to="/jeugd/u17/" activeClassName="active" partiallyActive={true}>
145			U17
146			</Link>
147			</li>
148			<li>
149			<Link to="/jeugd/u15/" activeClassName="active" partiallyActive={true}>
150			U15
151			</Link>
152			</li>
153			<li>
154			<Link to="/jeugd/u13/" activeClassName="active" partiallyActive={true}>
155			U13
156			</Link>
157			</li>
158			<li>
159			<Link to="/jeugd/u12/" activeClassName="active" partiallyActive={true}>
160			U12
161			</Link>
162			</li>
163			<li>
164			<Link to="/jeugd/u11/" activeClassName="active" partiallyActive={true}>
165			U11
166			</Link>
167			</li>
168			<li>
169			<Link to="/jeugd/u10/" activeClassName="active" partiallyActive={true}>
170			U10
171			</Link>
172			</li>
173			<li>
174			<Link to="/jeugd/u9/" activeClassName="active" partiallyActive={true}>
175			U9
176			</Link>
177			</li>
178			<li>
179			<Link to="/jeugd/u8/" activeClassName="active" partiallyActive={true}>
180			U8
181			</Link>
182			</li>
183			<li>
184			<Link to="/jeugd/u7/" activeClassName="active" partiallyActive={true}>
185			U7
186			</Link>
187			</li>
188			<li>
189			<Link to="/jeugd/u6/" activeClassName="active" partiallyActive={true}>
190			U6
191			</Link>
192			</li>
193			</ul>
194			</li>
195			<li>
196			<Link to="/sponsors/" activeClassName="active" partiallyActive={true}>
197			Sponsors
198			</Link>
199			</li>
200			<li>
201			<Link to="/club/" activeClassName="active" partiallyActive={true}>
202			De club
203			</Link>
204			<ul className="vertical menu submenu">
205			<li>
206			<Link to="/club/history/" activeClassName="active" partiallyActive={true}>
207			Geschiedenis
208			</Link>
209			</li>
210			<li>
211			<Link to="/club/bestuur/" activeClassName="active" partiallyActive={true}>
212			Bestuur
213			</Link>
214			</li>
215			<li>
216			<Link to="/club/jeugdbestuur/" activeClassName="active" partiallyActive={true}>
217			Jeugdbestuur
218			</Link>
219			</li>
220			<li>
221			<Link to="/club/responsibilities/" activeClassName="active" partiallyActive={true}>
222			Verantwoordelijkheden
223			</Link>
224			</li>
225			<li>
226			<Link to="/club/ultras/" activeClassName="active" partiallyActive={true}>
227			KCVV Ultras
228			</Link>
229			</li>
230			<li>
231			<Link to="/club/contact/" activeClassName="active" partiallyActive={true}>
232			Contact
233			</Link>
234			</li>
235			</ul>
236			</li>
237			<li>
238			<Link to="/search/" activeClassName="active" partiallyActive={true}>
239			<i className={`fa fa-search`} aria-hidden="true"></i>
240			{` `}
241			<span className={`display-mobile--inline-block display-mobile search--label`}>Zoeken</span>
242			</Link>
243			</li>
244			</Fragment>
245			)
246			}
247			}
248
249			/**
250			* Render the desktop version of the header.
251			*/
252			class PageHeader extends Component {
253			render() {
254			return (
255			// <!-- START STICKY CONTAINER --> //
256			// <header data-sticky-container className="l--header">
257			<header className="l--header">
258			{/* <!-- START STICKY INNER --> */}
259			{/* <div data-sticky data-options="marginTop:0;"> */}
260			<div>
261			{/* <!-- START MOBILE NAV BAR --> */}
262			<div className="header--mobile" data-responsive-toggle="responsive-menu" data-hide-for="large">
263			<button
264			type="button"
265			className="menu-icon"
266			data-toggle="responsiveNavigation"
267			aria-label="Toggle Responsive navigation"
268			/>
269			<div className="header-mobile__logo">
270			<Link to="/">
271			<img src={logo} alt="KCVV Elewijt" className="header-mobile__logo-img" />
272			</Link>
273			</div>
274			</div>
275			{/* <!-- END MOBILE NAV BAR --> */}
276
277			{/* <!-- START DESKTOP NAV BAR --> */}
278			<div className="header--desktop">
279			<div className="header__secondary show-for-large">
280			<div className="grid-container">
281			<div className="grid-x">
282			<div className="medium-4 medium-offset-8">
283			<div className="sponsors--header"></div>
284			</div>
285			</div>
286			</div>
287			</div>
288			<div className="header__primary show-for-large">
289			<div className="grid-container">
290			<div className="header__primary-inner">
291			{/* LOGO */}
292			<div className="header-logo">
293			<Link to="/">
294			<img src={logo} alt="KCVV Elewijt" className="header__logo-img" />
295			</Link>
296			</div>
297			<nav className="main-nav">
298			<ul className="main-nav__list--desktop menu dropdown" data-dropdown-menu>
299			<MenuItems />
300			</ul>
301			</nav>
302			</div>
303			</div>
304			</div>
305			</div>
306			</div>
307			{/* <!-- END DESKTOP NAV BAR --> */}
308
309			{/* <!-- END STICKY INNER --> */}
310			</header>
311			// <!-- END STICKY CONTAINER --> //
312			)
313			}
314			}
315
316			/**
317			* Render the mobile version of the header.
318			*/
319			export class PageHeaderMobile extends Component {
320			render() {
321			return (
322			<nav className="off-canvas position-left" id="responsiveNavigation" data-off-canvas>
323			<ul className="main-nav__list vertical menu" data-responsive-menu="accordion large-dropdown">
324			<div className="header-mobile__logo">
325			<button aria-label="Close menu" type="button" data-toggle="" className="button--back">
326			{/* <span aria-hidden="true" /> */}
327			</button>
328
329			<Link to="/">
330			<img src={logo} alt="KCVV Elewijt" className="header-mobile__logo-img" />
331			</Link>
332			</div>
333
334			<MenuItems />
335
336			<li className="main-nav__item--social-links">
337			<a
338			href="index.html"
339			className="social-links__link"
340			data-toggle="tooltip"
341			data-placement="bottom"
342			title=""
343			data-original-title="Facebook"
344			>
345			<i className="fa fa fa-facebook" />
346			</a>
347
348			<a
349			href="index.html"
350			className="social-links__link"
351			data-toggle="tooltip"
352			data-placement="bottom"
353			title=""
354			data-original-title="Twitter"
355			>
356			<i className="fa fa fa-twitter" />
357			</a>
358
359			<a
360			href="index.html"
361			className="social-links__link"
362			data-toggle="tooltip"
363			data-placement="bottom"
364			title=""
365			data-original-title="Instagram"
366			>
367			<i className="fa fa fa-instagram" />
368			</a>
369			</li>
370			</ul>
371			</nav>
372			)
373			}
374			}
375
376			export default PageHeader
377

soniCaH / KCVV-Elewijt-Gatsby

Pull Request — develop (#758)

PageHeaderMobile A

Complexity

Size/Duplication

Importance

1 Function

Duplication Side-by-Side

Filter issues like